<template>
  <!-- 通用布局: 只改变内容区域,头部和底部不变 -->
  <div id="basic-layout">
    <a-layout style="height: 100vh;">
      <a-layout-header class="header">
        <GlobalHeader/>
      </a-layout-header>

      <a-layout-content class="content-box">
        
        <div class="content">
          <router-view v-slot="{ Component }">
            <transition name="fade">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </a-layout-content>

      <a-layout-footer class="footer" style="height: 50px;">
        <a href="#" target="_blank">个人项目 by toolman</a>
      </a-layout-footer>

    </a-layout>
  </div>
</template>

<script setup lang="ts">
import GlobalHeader from '@/components/GlobalHeader.vue';
</script>


<style lang="scss" scoped>
  #basic-layout {
    .fade-enter-from {
      transform: translateX(20px);
    }
    .fade-enter-active {
      transition: all linear .3s;
    }
    .fade-enter-to {
      transform: translateX(0);
    }
    .footer {
      background: #efefef;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover a{
          font-size: 20px;
        }
      a {
        text-decoration: none;
        color: skyblue;
        transition: all linear .3s;
        
      }
    }
    .content-box {
      background: url('https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png') no-repeat;
      background-size: cover;
      margin-bottom: 28px;
       width: 100%;
    }
    .content {
      padding: 20px;
      max-width: 1400px;
      margin: 0 auto;
    }
    .header {
      margin-bottom: 16px;
      box-shadow: 5px 5px 5px #eee;
    }
  }
</style>